<template>
  <div class="app-container">
    <!-- 桌面端左右布局 -->
    <el-row :gutter="10" v-if="!isMobile">
      <el-col :span="showTree ? 6 : 0">
        <CourseTree
          :title="title"
          @search="getList1"
        />
      </el-col>
      <el-col :span="showTree ? 18 : 24">
        <div class="course_content">
          <el-row
            type="flex"
            justify="around"
            style="width:100%"
          >
            <el-col :span="8">
              <el-form
                :model="queryParams"
                ref="queryForm"
                v-show="showSearch"
                :inline="true"
              >
                <el-form-item label="阅卷状态">
                  <el-select
                    v-model="queryParams.is_marked"
                    clearable
                    size="small"
                    placeholder="请选择.."
                    @change="getList"
                    v-loading="loading"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <el-row
            :gutter="10"
            class="mb8"
          >
            <right-toolbar
              :showSearch.sync="showSearch"
              :showTree.sync="showTree"
              @queryTable="getList"
            ></right-toolbar>
          </el-row>
          <el-table
            :data="List"
            style="width: 100%;"
            :header-cell-style="{'text-align':'center'}"
            :cell-style="{'text-align':'center'}"
          >
            <el-table-column
              type="selection"
              width="45"
            >
            </el-table-column>

            <el-table-column
              min-width="260"
              label="试卷信息"
            >
              <template slot-scope="scope">
                <el-row>
                  <el-col :span="16">
                    <el-row
                      type="flex"
                      justify="middle"
                    >
                      <el-col
                        :span="24"
                        class="course_name"
                      > {{scope.row.name}}</el-col>
                    </el-row>

                    <el-row>

                      <el-col
                        :span="24"
                        class="create_time"
                      > 开考时间：{{scope.row.start_time |formatDate}}
                      </el-col>
                      <el-col
                        :span="24"
                        class="create_time"
                      > 结束时间： {{scope.row.end_time |formatDate }}
                      </el-col>

                    </el-row>

                  </el-col>
                </el-row>
              </template>
            </el-table-column>

            <el-table-column
              label="考生"

            >
            <template slot-scope="scope" >
               <span v-if="scope.row.user&&scope.row.user.name">{{ scope.row.user.name }}</span>
               <span v-else>暂无</span>
              </template>
          </el-table-column>
            <el-table-column label="试卷状态">
              <template scope="scope">
                <div>
                  {{scope.row.is_submited |subFilter}}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="考试状态"
              prop="state_name"
            ></el-table-column>
            <el-table-column>
              <template slot-scope="scope">

                <el-button
                  v-show="scope.row.is_marked==false &&scope.row.is_submited==true"
                  icon="el-icon-caret-right"
                  type="primary"
                  size="mini"
                  @click="handleMarking(scope.row)"
                  :style="{backgroundColor:theme,borderColor:theme,fontWeight:'bold'}"
                  v-hasPermi="['exam:making:query']"
                >去阅卷</el-button>

              </template>

            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.page_size"
            @pagination="getList"
          />
        </div>

      </el-col>
    </el-row>

    <!-- 移动端上下布局 -->
    <template v-if="isMobile">
      <!-- 移动端骨架屏 -->
      <mobile-skeleton 
        v-if="loading" 
        :showHeader="false"
        :showSearch="true" 
        :searchFields="1"
        :cardsCount="3"
        :showPagination="total > 0"
      />
      
      <template v-else>
        <!-- 移动端分类树 -->
        <div v-if="showTree" class="mobile-tree-container">
          <div class="mobile-tree-header">
            <span :style="{ color: theme }">{{ title }}</span>
            <el-button 
              type="text" 
              icon="el-icon-arrow-up" 
              @click="showTree = false" 
              :style="{ color: theme }"
              v-if="showTree">
              收起
            </el-button>
          </div>
          <CourseTree :title="title" @search="getList1" />
        </div>
        <div v-else class="mobile-tree-toggle">
          <el-row :gutter="10">
            <el-col :span="24">
              <el-button 
                type="primary" 
                size="small" 
                icon="el-icon-arrow-down"
                @click="showTree = true"
                :style="{
                  backgroundColor: theme,
                  borderColor: theme,
                  width: '100%',
                  marginBottom: '10px',
                  borderRadius: '4px',
                  height: '36px'
                }">
                展开阅卷分类
              </el-button>
            </el-col>
          </el-row>
        </div>
        
        <!-- 移动端搜索表单 -->
        <div class="course_content">
          <el-row type="flex" justify="around" style="width: 100%" class="mobile-search">
            <el-col :span="24">
              <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true" class="mobile-form">
                <el-form-item label="阅卷状态">
                  <el-select
                    v-model="queryParams.is_marked"
                    clearable
                    size="small"
                    placeholder="请选择.."
                    @change="getList"
                    v-loading="loading"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>

          <!-- 移动端工具栏 -->
          <el-row :gutter="10" class="mb8 mobile-toolbar">
            <right-toolbar :showSearch.sync="showSearch" :showTree.sync="showTree" @queryTable="getList"></right-toolbar>
          </el-row>

          <!-- 移动端卡片视图 -->
          <div class="mobile-card-view">
            <div v-if="List.length === 0" class="empty-data">
              <i class="el-icon-document"></i>
              <p>暂无数据</p>
            </div>
            
            <el-card v-for="(item, index) in List" :key="index" class="mobile-card" shadow="hover">
              <div slot="header" class="card-header">
                <div class="card-title" :style="{ color: theme }">{{ item.name }}</div>
              </div>
              <div class="card-content">
                <div class="info-list">
                  <div class="info-item">
                    <span class="label">考生：</span>
                    <span class="value" v-if="item.user && item.user.name">{{ item.user.name }}</span>
                    <span class="value" v-else>暂无</span>
                  </div>
                  <div class="info-item">
                    <span class="label">考试状态：</span>
                    <span class="value">{{ item.state_name }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">试卷状态：</span>
                    <span class="value">{{ item.is_submited | subFilter }}</span>
                  </div>
                </div>
                
                <div class="exam-details" v-if="expandedCards[index]">
                  <div class="details-section">
                    <div class="info-item">
                      <span class="label">开考时间：</span>
                      <span class="value">{{ item.start_time | formatDate }}</span>
                    </div>
                    <div class="info-item">
                      <span class="label">结束时间：</span>
                      <span class="value">{{ item.end_time | formatDate }}</span>
                    </div>
                  </div>
                </div>
                
                <div class="card-toggle">
                  <el-button type="text" size="small" @click.stop="expandCard(index)">
                    {{ expandedCards[index] ? '收起' : '查看详情' }}
                    <i :class="expandedCards[index] ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                  </el-button>
                </div>
                
                <div class="card-actions-footer" v-if="item.is_marked == false && item.is_submited == true">
                  <el-button 
                    type="primary"
                    @click="handleMarking(item)"
                    :style="{
                      backgroundColor: theme,
                      borderColor: theme,
                      width: '100%',
                      marginTop: '10px'
                    }"
                    v-hasPermi="['exam:making:query']">
                    去阅卷
                  </el-button>
                </div>
              </div>
            </el-card>
            
            <!-- 移动端分页 -->
            <div class="mobile-pagination" v-if="total > 0">
              <div class="mobile-pagination-wrapper">
                <!-- 第一行：总数和每页条数 -->
                <div class="pagination-row top-row">
                  <span class="el-pagination__total">共 {{ total }} 条</span>
                  <el-select 
                    v-model="queryParams.page_size" 
                    size="mini" 
                    class="el-pagination__sizes"
                    @change="handleSizeChange">
                    <el-option
                      v-for="item in [10, 20, 30, 50]"
                      :key="item"
                      :label="`${item}条/页`"
                      :value="item">
                    </el-option>
                  </el-select>
                </div>
                
                <!-- 第二行：页码导航 -->
                <div class="pagination-row bottom-row">
                  <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :current-page="queryParams.page"
                    :page-size="queryParams.page_size"
                    layout="prev, pager, next, jumper"
                    :total="total">
                  </el-pagination>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </template>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import variables from "@/assets/styles/variables.scss";
import { markingExam } from "@/api/vadmin/exam/making";
import CourseTree from "@/components/CourseTree";
import MobileSkeleton from "@/components/MobileSkeleton";
import "@/assets/styles/mobile/exam.scss";

export default {
  name: "test",
  components: { CourseTree, MobileSkeleton },
  data() {
    return {
      showTree: true,
      title: "考试分类",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      courseList: null,
      form: {},
      queryParams: {
        // courseId: "",
        is_marked: "",
        page: 1,
        page_size: 10,
      },
      // 阅卷状态
      options: [
        { value: true, label: "已阅卷" },
        { value: false, label: "待阅卷" },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      List: [],
      courseOptions: [],
      courseName: undefined,
      intervalId: null,
      isMobile: false,
      mediaQueryList: null,
      expandedCards: {},
    };
  },
  filters: {
    subFilter(value) {
      if (value) {
        return "已交卷";
      } else {
        return "未交卷";
      }
    },
  },
  computed: {
    ...mapState(["settings"]),
    variables() {
      return variables;
    },
    theme() {
      return this.$store.state.settings.theme;
    },
  },

  created() {
    this.getList();
  },

  mounted() {
    // 使用媒体查询API直接监听视口变化
    this.mediaQueryList = window.matchMedia('(max-width: 767px)');
    
    // 初始化isMobile状态
    this.isMobile = this.mediaQueryList.matches;
    
    // 为媒体查询添加监听器
    const handleMediaChange = (e) => {
      this.isMobile = e.matches;
      
      // 强制组件重新渲染
      this.$forceUpdate();
    };
    
    // 使用适当的API添加监听器
    if (this.mediaQueryList.addEventListener) {
      this.mediaQueryList.addEventListener('change', handleMediaChange);
    } else {
      // 旧版浏览器支持
      this.mediaQueryList.addListener(handleMediaChange);
    }
    
    // 存储监听器以便后续移除
    this.mediaChangeHandler = handleMediaChange;
  },
  
  beforeDestroy() {
    // 移除媒体查询监听器
    if (this.mediaQueryList) {
      if (this.mediaQueryList.removeEventListener) {
        this.mediaQueryList.removeEventListener('change', this.mediaChangeHandler);
      } else {
        // 旧版浏览器支持
        this.mediaQueryList.removeListener(this.mediaChangeHandler);
      }
    }
  },

  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      markingExam(this.queryParams).then((response) => {
        // console.log(2121, response);
        this.List = response.results;
        this.total = response.count;
        this.loading = false;
      });
    },
    /** 查询列表 */
    getList1(data) {
      if (data.id) {
        this.loading = true;
        this.queryParams.course = data.id;
        this.getList();
      } else {
        this.loading = true;
        this.getList();
      }
    },
    /*去考试 */
    handleMarking(row) {
      this.$router.push({
        name: "Makingexam",
        params: { row: row },
      });
    },
    /*新增考试 */
    handleAdd() {
      this.$router.push({ name: "Newexam" });
    },
    /*修改试卷 */
    handleUpdate(row) {
      this.$router.push({ name: "Newexam", params: { id: row.id } });
    },
    expandCard(index) {
      this.$set(this.expandedCards, index, !this.expandedCards[index]);
    },
    handleSizeChange(size) {
      this.queryParams.page_size = size;
      this.getList();
    },
    handleCurrentChange(page) {
      this.queryParams.page = page;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  background-color: transparent;
  padding: 0;
}
</style>
